<template>
  <div>
    <div
      class="limit-contaner"
      v-show="validate"
    >
      <span class="limit">
        <button
          class="btn"
          @click="loginUser"
          open-type="getUserInfo"
        >كىرىش</button>
      </span>
    </div>
    <van-toast id="van-toast" />
    <div v-if="flag==0">
      <van-notify id="van-notify" />
      <!-- <div class="header">قولاي</div> -->
      <div
        class="swpierContainer"
        style="margin-top:20rpx;"
      >
        <swiper
          :indicator-dots="true"
          :autoplay="true"
          :interval="6000"
          :duration="1000"
          :circular="true"
          :indicator-active-color="'rgba(255,2555,255,0.7)'"
          style="height:100%"
        >
          <block
            v-for="(item,index) in adList"
            :key="index"
          >
            <swiper-item>
              <image
                :src="item.imgUrl"
                class="slide-image"
                mode="aspectFill"
                @click="toAd(item,index)"
              />
            </swiper-item>
          </block>
        </swiper>
      </div>
      <i-grid>
        <i-grid-item @click="enterToPhoneAddress">
          <i-grid-icon>
            <image src="../../static/img/tabbar/guishudi.svg" />
          </i-grid-icon>
          <i-grid-label>يانفۇن نومۇر</i-grid-label>
        </i-grid-item>
        <i-grid-item @click="enterToWeather">
          <i-grid-icon>
            <image src="../../static/img/tabbar/weather.svg" />
          </i-grid-icon>
          <i-grid-label>ھاۋارايى</i-grid-label>
        </i-grid-item>
        <i-grid-item @click="toMyPage">
          <i-grid-icon>
            <image src="../../static/img/tabbar/my.png" />
          </i-grid-icon>
          <i-grid-label>مېنىڭ</i-grid-label>
        </i-grid-item>
      </i-grid>
      <i-grid>
        <i-grid-item @click="deVeloping">
          <i-grid-icon>
            <image src="../../static/img/tabbar/weizhang.png" />
          </i-grid-icon>
          <i-grid-label>جەرىمانە</i-grid-label>
        </i-grid-item>
        <i-grid-item @click="phoneCharge">
          <i-grid-icon>
            <image src="../../static/img/tabbar/huafei.png" />
          </i-grid-icon>
          <i-grid-label>پۇل قاچىلاش</i-grid-label>
        </i-grid-item>
        <i-grid-item @click="deVeloping">
          <i-grid-icon>
            <image src="../../static/img/tabbar/train.png" />
          </i-grid-icon>
          <i-grid-label>پويىز بېلەت</i-grid-label>
        </i-grid-item>
      </i-grid>
      <i-grid>
        <i-grid-item @click="enterToFlowCharge">
          <i-grid-icon>
            <image src="../../static/img/tabbar/liuliang.png" />
          </i-grid-icon>
          <i-grid-label>ئېقىم قاچىلاش</i-grid-label>
        </i-grid-item>
        <i-grid-item @click="deVeloping">
          <i-grid-icon>
            <!-- <image src="../../static/img/tabbar/kuaidi.png" /> -->
            <image src="../../static/img/tabbar/express.svg" />
          </i-grid-icon>
          <i-grid-label>تېز يوللانما</i-grid-label>
        </i-grid-item>
        <i-grid-item @click="enterToAbout">
          <i-grid-icon>
            <image src="../../static/img/tabbar/author.svg" />
          </i-grid-icon>
          <i-grid-label>ئاپتور</i-grid-label>
        </i-grid-item>
      </i-grid>
    </div>
    <div
      class="red-packet"
      :style="{display:redPacketDisplay}"
    >
      <image
        @click="toRedPacket"
        src="https://wx.2xur7.cn/static/images/event/bolak.png"
      />
      <span
        class="close"
        @click="closePacket"
      ></span>
    </div>
  </div>
</template>
<script>
import qcloud from "wafer2-client-sdk";
import config from "@/config";
/* import Me from "@/components/Me";
import Dict from "@/components/Dict";
import Default from "@/components/Default"; */
import Notify from "../../../static/Vant/notify/notify";
import { get, showSuccess, showTimerToast } from "@/util";
import Toast from "../../../static/Vant/toast/toast";
export default {
  data() {
    return {
      validate: false,
      flag: 0,
      imgUrls: [
        "https://wx.2xur7.cn/static/images/swiper/ad2.png",
        "https://wx.2xur7.cn/static/images/swiper/ad1.png",
        "https://wx.2xur7.cn/static/images/swiper/ad3.png"
      ],
      adList: {},
      state: "",
      redPacketDisplay: "none",
      sharer_id: "",
      icon: {
        sentence: "http://wx.2xur7.cn/static/img/dict.svg",
        sentence_full: "http://wx.2xur7.cn/static/img/dict_full.svg",
        dict: "http://wx.2xur7.cn/static/img/dict.png",
        dict_full: "http://wx.2xur7.cn/static/img/dict_full.png",
        me: "http://wx.2xur7.cn/static/img/me.png",
        me_full: "http://wx.2xur7.cn/static/img/me_full.png",
        home: "http://wx.2xur7.cn/static/img/home.png",
        home_full: "http://wx.2xur7.cn/static/img/home_full.png"
      }
    };
  },
  async beforeMount() {
    let { state, indexAD } = wx.getStorageSync("config");
    this.state = state;
    let imgUrls = [];
    this.adList = indexAD;
    /* for (let val in indexAD) {
      imgUrls.push(indexAD[val].imgUrl);
    }
    this.imgUrls = imgUrls; */
    let userInfo = wx.getStorageSync("userInfo");
    this.redPacketDisplay = "block";
  },
  methods: {
    loginUser() {
      let user = wx.getStorageSync("userInfo");
      const _this = this;
      if (!user) {
        wx.showLoading();
        qcloud.setLoginUrl(config.loginUrl);
        qcloud.login({
          success: function(userInfo) {
            wx.setStorageSync("userInfo", userInfo);
            wx.hideLoading();
            Toast.success("كىرىش تامام");
            _this.validate = false;
            _this.userInfo = userInfo;
            // wx.setStorageSync("userInfo", userInfo);
            _this.$root.redPacketDisplay = "block";
            if (_this.sharer_id) {
              let { openId } = userInfo;
              _this.$http.post("https://wx.2xur7.cn/weapp/redpacket", {
                sharer_id: _this.sharer_id,
                friend_id: openId,
                userInfo: JSON.stringify(userInfo)
              });
            }
          },
          fail: function(err) {
            // console.log("登录失败", err);
            Toast.fail("مەغلۇپ بولدى");
            wx.hideLoading();
          }
        });
      }
    },
    toAd(item, id) {
      if (item.type == "web") {
        wx.navigateTo({ url: "/pages/AD/main?from=index&id=" + id });
      }
      if (item.type == "weapp") {
        let weappInfo = item.weappInfo;
        wx.navigateToMiniProgram({
          appId: weappInfo.appId,
          path: weappInfo.path
        });
      }
    },
    enterToPhoneAddress() {
      wx.navigateTo({ url: "/pages/PhoneAddress/main" });
    },
    enterToWeather() {
      wx.navigateTo({ url: "/pages/Weather/main" });
    },
    enterToDict() {
      wx.navigateTo({ url: "/pages/Dict/main" });
    },
    enterToFlowCharge() {
      wx.navigateTo({ url: "/pages/Flow/main" });
    },
    phoneCharge() {
      wx.navigateTo({ url: "/pages/PhoneCharge/main" });
    },
    deVeloping() {
      Notify("! ئىقتىدار ياسىلىۋاتىدۇ");
    },
    enterToAbout() {
      wx.navigateTo({ url: "/pages/About/main" });
    },
    closePacket() {
      this.$root.redPacketDisplay = "none";
      this.redPacketDisplay = "none";
    },
    toRedPacket() {
      let { openId } = wx.getStorageSync("userInfo");
      wx.navigateTo({ url: `/pages/RedPacket/main?id=${openId}` });
    },
    toMyPage() {
      wx.navigateTo({ url: "/pages/Me/main" });
    }
  },
  components: {},
  onShareAppMessage() {
    return {
      title: "Qolay",
      path: "/pages/Index/main",
      // imageUrl: "url",
      success: res => {},
      fail: () => {},
      complete: () => {}
    };
  },
  onShow() {
    let oldTime = Page.prototype.timeStamp;
    let now = new Date().getTime();
    if (now - oldTime > 60 * 1000) {
      this.redPacketDisplay = "block";
      Page.prototype.timeStamp = new Date().getTime();
    }
  },
  mounted() {
    this.sharer_id = this.$root.$mp.query.openId; //判断是否在红包也分享进来的
    // this.validate = this.$root.validate;
    let userInfo = wx.getStorageSync("userInfo");
    if (userInfo) {
      // this.$root.redPacketDisplay = "block";
    } else {
      this.validate = true;
      // this.$root.redPacketDisplay = "none";
    }
    let { openId } = wx.getStorageSync("userInfo");
    // 发红包
    /*  openId = "man";
    let shareId = "shareid13456";
    this.$http.post("https://wx.2xur7.cn/weapp/redpacket", {
      sharer_id: openId,
      friend_id: shareId,
      userInfo
    }); */
  }
};
</script>

<style lang="scss">
.swpierContainer {
  width: 94%;
  height: 300rpx;
  background-color: transparent;
  margin: 0 auto;
  border-radius: 15rpx;
  // margin-bottom: 25rpx;
  box-shadow: 0 1px 1px rgba(0, 0, 0, 0.1);
  overflow: hidden;
  .slide-image {
    width: 100%;
    height: 300rpx;
    border-radius: 15rpx;
    overflow: hidden;
    imag {
      height: 100%;
    }
  }
}
.i-grid-label {
  color: #424242 !important;
}
.red-packet {
  position: fixed;
  top: -360rpx;
  bottom: 0;
  left: 0;
  right: 0;
  margin: auto;
  width: 50vw;
  height: 50vh;
  // border: 1px solid red;
  image {
    position: absolute;
    width: 510rpx;
    height: 652rpx;
    left: -60rpx;
    display: inline-blcok;
  }
  animation: yaodong 2.5s 0.15s linear infinite;
  .close {
    position: absolute;
    /*  top: 58rpx;
    right: 0rpx; */
    width: 60rpx;
    height: 60rpx;
    border: 2rpx solid #eee;
    border-radius: 50%;
    background-color: rgba(0, 0, 0, 0.2);
    bottom: -70rpx;
    left: 121rpx;
  }
  .close::before,
  .close::after {
    content: "";
    position: absolute;
    width: 80%;
    top: 72%;
    left: 12%;
    height: 2px;
    margin-top: -6px;
    border-radius: 5px;
    background: #eee;
  }
  .close::before {
    transform: rotate(45deg);
  }
  .close::after {
    transform: rotate(-45deg);
  }
}
@keyframes yaodong {
  10% {
    transform: rotate(15deg);
  }
  20% {
    transform: rotate(-10deg);
  }
  30% {
    transform: rotate(5deg);
  }
  40% {
    transform: rotate(-5deg);
  }
  50%,
  100% {
    transform: rotate(0deg);
  }
}
.limit-contaner {
  width: 300rpx;
  height: 300rpx;
  background-color: #eee;
  position: fixed;
  left: 30%;
  top: 30%;
  z-index: 999;
  border-radius: 15px;
  opacity: 0.8;
  .limit {
    width: 96%;
    margin: 20% auto;
    display: flex;
    justify-content: center;
    align-items: center;
    .btn {
      height: 200rpx;
      width: 200rpx;
      border-radius: 50%;
      border: 1px solid #2d8cf0;
      color: #2d8cf0;
      font-size: 30rpx;
      line-height: 200rpx;
      padding-left: 14px;
      padding-right: 14px;
      box-sizing: border-box;
      background-color: rgba(255, 255, 255, 0.2);
    }
  }
}
.van-tabbar-item--active {
  color: #3388ff;
  color: #666;
}
.van-tabbar-item__icon {
  margin-bottom: 0;
}
.limit-contaner {
  width: 300rpx;
  height: 300rpx;
  background-color: #eee;
  position: fixed;
  left: 30%;
  top: 30%;
  z-index: 999;
  border-radius: 15px;
  opacity: 0.8;
  .limit {
    width: 96%;
    margin: 20% auto;
    display: flex;
    justify-content: center;
    align-items: center;
    .btn {
      height: 200rpx;
      width: 200rpx;
      border-radius: 50%;
      border: 1px solid #2d8cf0;
      color: #2d8cf0;
      font-size: 30rpx;
      line-height: 200rpx;
      padding-left: 14px;
      padding-right: 14px;
      box-sizing: border-box;
      background-color: rgba(255, 255, 255, 0.2);
    }
  }
}

</style>
